<template>
  <div class="">
    <ELTable v-bind="configTable">
      <!-- 搜索 -->
      <template #search="{searchSubmit,params}">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input v-model="params.key" placeholder="请输入关键字" />
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="params.address" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="params.mobile" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="时间">
              <DateSelect  @dateChange="(e)=>dateChange(e,params)"></DateSelect>
            </el-form-item>
          <el-form-item label="状态">
              <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态" >
                <el-option v-for="item in repairState" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="报修类型">
              <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择类型" >
                <el-option v-for="item in repairsType" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="居民">
              <el-input v-model="params.userid" placeholder="请输入用户id" />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="searchSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        </div>
      </template>

      <template #buttons="{ deleteAllHandle }">
        <div>
          <el-button type="danger" @click="deleteAllHandle">删除</el-button>
        </div>
      </template>

     <template #typename="{scope}">
      <div @click="repairsInner(scope.row)" class="inner" style="color: skyblue;text-decoration: underline;cursor: pointer;">
        {{ scope.row.typename }}
      </div>
     </template>
     <template #state="{scope}">
      <div :class="{sure:scope.row.state==1}" @click="changeState">
        {{ scope.row.state==1?'未处理':'处理完成' }}
      </div>
     </template>
     <template #operate="{ scope, delrow }">
        <div>
          <el-button type="danger" @click="delrow(scope.row.id)">删除</el-button>
        </div>
      </template>
    </ELTable>
    <Repairsinner v-if="dialogVisible" :inner="innerdata" :state="state"  @close="innerClose" />
    <RepairsStateChange  v-if="changedialogVisible" :inner="innerdata" :state="state"  @close="changeClose" @stateChange="stateChange" > </RepairsStateChange>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted } from "vue"
import ELTable, { TableType } from "../../components/ELTable.vue";
import { column } from "./repairs"
import { getrepairs, delrepairs, delallrepairs, getrepairstate, getrepairstype } from "../../service/repairs/repairslist";
import DateSelect from "../../components/DateSelect.vue";
import Repairsinner from "../../components/Repairsinner.vue";
import RepairsStateChange from "../../components/RepairsStateChange.vue";

const configTable: TableType = reactive({
  column: column,
  isSelection: true,
  loadData: getrepairs,
  delallDate: delallrepairs,
  delDate: delrepairs,
})

const state = ref(1)
const innerdata = ref({})
const dialogVisible = ref(false)
const changedialogVisible = ref(false)
const innerClose = () => {
  dialogVisible.value=false
}
const changeClose = () => {
  changedialogVisible.value=false
}


const stateChange = (e:any)=>{
  
}
//报修详情
const repairsInner = (scope:any) => {
  innerdata.value = scope
  state.value=scope.state
  dialogVisible.value=true  
}

const changeState = (scope:any) => {
  state.value=scope.state
  changedialogVisible.value=true
}

//获取报修类型和状态
type RepairsType = {
  id: number,
  name: string
}

const repairsType = ref<RepairsType[]>([])
const repairState = ref<RepairsType[]>([])
const getTypeandState = async () => {
  const res = await Promise.all([getrepairstype(), getrepairstate()])
  repairsType.value = res[0].data.list
  repairState.value = res[1].data.list
  console.log(repairState,repairsType);
}

const dateChange = (e: any, params: any) => {
  params.begindate = e[0]
  params.enddate = e[1]
}

onMounted(() => {
  getTypeandState()
})
</script>

<style scoped>
.sure{
  color: blue;
}
</style>
